<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lavoro求职平台</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <!--导航栏liu-->
    <div class="navbar">
        <img src="../images/logo-default-161x42.png" alt="logo" class="navbar-img">
        <div class="navbar-links">
        <a href="#home">家</a>
        <a href="#about">关于我们</a>
        <a href="#page">页面</a>
        <a href="#blog">博客</a>
    
    <div class="navbar-auth">
        <button class="navbar-button" onclick="showLogin()">
            <img src="../images/人.png" alt="报名图标">
            登录
        </button>
        <button class="navbar-button" onclick="showSignup()">
            <img src="../images/登录.png" alt="登录图标">
            报名
        </button>
    </div> 
</div>   <!-- 隐藏的登录和报名表单 -->
        <div id="login-form" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('login-form')">&times;</span>
                <h2>登录</h2>
                <p>请输入您的登录信息</p>
                <!-- 登录表单内容 -->
                <form>
                    <!-- 表单字段 -->
                </form>
            </div>
        </div>
        <div id="signup-form" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('signup-form')">&times;</span>
                <h2>报名</h2>
                <p>请输入您的报名信息</p>
                <!-- 报名表单内容 -->
                <form>
                    <!-- 表单字段 -->
                </form>
            </div>
        </div>
    </div>
    <!--发现机遇的地方zhu-->
        <div class="main-content">
            <!-- 添加搜索功能 -->
            <div class="bg-14">
                <img src="../images/bg-14.jpg" alt="bg-14" class="bg-14-img">
                <div class="bg-14-img-text">
                    <div class="bg-14-img-text-title">
                        发现机遇的地方</div>
                    <div class="bg-14-img-text-search">
                        <div class="part-1">
                            <i class="fas fa-search icon"></i>
                            <input type="text" placeholder="关键词"/>
                        </div>
                        <div class="part-2">
                            <i class="fas fa-map-marker-alt icon location-icon"></i>
                            <input type="text" placeholder="所有地区"/>
                            <i class="fas fa-chevron-down icon"></i>
                        </div>
                        <div class="part-3">
                            <button type="submit">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--热门类别汪-->        
        <div class="container1">
            <div id="title1">热门类别</div>
            <div id="title2">每天新增就业岗位超过137个</div>
            <div class="box">
                <div class="box1">
                    <ul class="no-bullet">
                        <li class="flex-item"><span>会计与金融</span><span class="right">2590</span></li>
                        <hr>
                        <br>
                        <li class="flex-item"><span>信息技术</span><span class="right">3567</span></li>
                        <hr>
                        <br>
                        <li class="flex-item"><span>房地产</span><span class="right">4235</span></li>
                        <hr>
                        <br>
                        <li class="flex-item"><span>汽车与机动车</span><span class="right">234</span></li>
    
                    </ul>
                </div>
                <div class="box1">
                    <ul class="no-bullet">
                        <li class="flex-item"><span>建造</span><span class="right">1467</span></li>
                        <hr><br>
                        <li class="flex-item"><span>设计与艺术</span><span class="right">890</span></li>
                        <hr><br>
                        <li class="flex-item"><span>销售与营销</span><span class="right">1214</span></li>
                        <hr><br>
                        <li class="flex-item"><span>其他工作</span><span class="right">1235</span></li>
    
                    </ul>
                </div>
                <div class="box1">
                    <ul class="no-bullet">
                        <li class="flex-item"><span>卫生保健</span><span class="right">1653</span></li>
                        <hr><br>
                        <li class="flex-item"><span>社交媒体</span><span class="right">453</span></li>
                        <hr><br>
                        <li class="flex-item"><span>餐饮服务</span><span class="right">234</span></li>
                        <hr><br>
                        <li class="flex-item"><span>后勤</span><span class="right">234</span></li>
    
                    </ul>
                </div>
            </div>
        </div>
    
        <div class="box2">
            <img src="../images/搜索 .png" width="120px">
            <div class="zuoyi"> 浏览超过20,000个当前职位空缺</div>
            <button>浏览所有类别</button>
        </div>
        <!--候选人-liu-->
        <div class="title">新候选人</div>
    
    <div class="container">
        
        <!-- 卡片1 -->
        <div class="card">
            <img src="../images/candidates-grid-1-266x219.jpg" alt="卡片1中的人物">
            <div class="card-content">
                <p><b>阿曼达·库克</b></p>
                <p><span class="icon2">&#xf3c5;</span>加利福尼亚州洛杉矶</p>
                <p><span class="icon2">&#xf007</span>初级网页设计师</p>
                <hr class="my-custom-line">
                <p class="my-custom-grey">通过 Adobe Photoshop 和 Illustrator 设计原创作品以实现客户所期望的愿景。</p>
                
            </div>
        </div>
        <!-- 卡片2 -->
        <div class="card">
            <img src="../images/candidates-grid-2-266x219.jpg" alt="卡片2中的人物">
            <div class="card-content">
                <p><b>凯文·帕克</b></p>
                <p><span class="icon2">&#xf3c5;</span>华盛顿州西雅图</p>
                <p><span class="icon2">&#xf007</span>人力资源经理</p>
                <hr class="my-custom-line">
                <p class="my-custom-grey">与客户合作满足他们的人力资源需求:员工关系、招聘、合规等问题。</p>
            </div>
        </div>
        <!-- 卡片3 -->
        <div class="card">
            <img src="../images/candidates-grid-3-266x219.jpg" alt="卡片3中的人物">
            <div class="card-content">
                <p><b>桑迪·威廉姆斯</b></p>
                <p><span class="icon2">&#xf3c5;</span>佛罗里达州迈阿密</p>
                <p><span class="icon2">&#xf007</span>销售经理</p>
                <hr class="my-custom-line">
                <p class="my-custom-grey">参加所有销售职能、公司会议和销售团队培训;每天前往新店。</p>

            </div>
        </div>
        <!-- 可以继续添加更多卡片，但注意在极小屏幕上可能会难以阅读 -->
    </div>
        </div><!--nain结尾-->
        
    
<!--footer-liu-->
    <footer class="footer">
        <div class="footer-container">
            <!-- 关于我们 -->
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>Lavoro 是网络上领先的求职网站,每周提供超过2000个职位空缺。</p>
                <div class="newsletter">
                    <input type="email" placeholder="输入您的电子邮件以获取最新消息">
                    <button type="submit">
                        <img src="../images/iconfont-qtsfkuan.png" alt="箭头" class="arrow-icon">
                    </button>
                </div>
            </div>

            <!-- 对于候选人 -->
            <div class="footer-section">
                <h3>对于候选人</h3>
                <ul>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon"> 浏览职位</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">浏览类别</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">提交简历</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">公司</a></li>
                </ul>
            </div>

            <!-- 对于雇主 -->
            <div class="footer-section">
                <h3>对于雇主</h3>
                <ul>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">发布职位</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">寻找候选人</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">价格表</a></li>
                    <li><a href="#"><img src="../images/箭头-向右.png" alt="浏览" class="footer-icon">常问问题</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>Lavoro © 2024<a href="#" class="pseudo-underline">隐私政策网站模板</a></p>
            <div class="social-links">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-google-plus-g"></i></a>
                <a href="#"><i class="fab fa-pinterest-p"></i></a>
            </div>
        </div>
    </footer>
    <!--top-lang-->
    <button id="toTopBtn">^</button>


    <script src="script.js"></script>
</body>
</html>